/**
 * Copyright (c) 2017-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
@import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap');
@import url('https://use.typekit.net/mpa1wkh.css');

html {
  -webkit-font-smoothing: subpixel-antialiased;
}

:root {
  --ifm-color-primary: #4c8a7b;
  --ifm-color-secondary: #0d66d0;
  --ifm-color-secondary-lighter: #1473e6;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-navbar-background-color: #39423e;
  --ifm-navbar-link-color: rgba(255, 255, 255, 0.85);
  --ifm-font-family-base: 'acumin-pro', 'Source Sans Pro', system-ui,
    -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --ifm-font-family-monospace: 'Fira Code', SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;
  --ifm-navbar-link-color: rgba(255, 255, 255, 0.6);
  --ifm-navbar-link-hover-color: #fff;
  --ifm-navbar-search-input-background-color: rgba(0, 0, 0, 0.2);
  --ifm-navbar-search-input-color: rgba(255, 255, 255, 0.9);
  --ifm-contents-border-color: #ececec;
  --ifm-footer-background-color: #f7f9f8;
  --ifm-footer-madewith-color: rgba(0, 0, 0, 0.7);

  --ifm-sidebar-background-color: #fff;
  --ifm-sidebar-color: #222;
  --ifm-link-color: #4ba0a0;
  --ifm-code-font-size: 12px;
  --ifm-font-size-base: 0.9rem;
  --ifm-navbar-padding-vertical: 2rem;
  --ifm-navbar-padding-horizontal: 1.4rem;
  --ifm-menu-color-background-active: rgb(246, 249, 248);
  --ifm-menu-color-background-hover: rgb(248, 251, 250);
  --ifm-global-radius: 3px;
  --ifm-dropdown-link-color: #6e7073;
}

.navbar__inner {
  flex-wrap: unset;
}

.navbar__title {
  font-size: 20px;
  font-weight: 200;
  color: #fff;
  margin-top: -2px;
}

html[data-theme='dark'] {
  --ifm-color-primary: #7dc7b5;
  --ifm-background-color: #212724;
  --ifm-footer-background-color: #242926;
  --ifm-contents-border-color: rgba(255, 255, 255, 0.09);
  --ifm-footer-madewith-color: rgba(255, 255, 255, 0.7);

  --ifm-sidebar-background-color: #1f1f1f;
  --ifm-sidebar-color: #fff;
  --ifm-menu-color-background-active: rgb(57, 68, 64);
  --ifm-menu-color-background-hover: rgb(57, 68, 64);
}
.navbar .navbar__search .navbar__search-input {
  font-weight: 300;
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

strong.api-type {
  margin-left: 5px;
  color: var(--ifm-color-secondary);
  /* font-style: italic; */
  font-size: 13px;
  font-weight: 400;
  font-family: 'Fira Code';
}

.api-description {
  /* font-style: italic; */
  margin-left: 3px;
  color: rgba(0, 0, 0, 0.61);
  /* margin: 2px 0; */
  padding: 0px 2px;
  font-size: 13px;
  font-weight: 400;
}

li.api-item {
  padding: 6px 0 0px 0px;
}

.menu .menu__link.menu__link--sublist:after {
  height: 20px;
  width: 20px;
  background-size: contain;
}

.footer .footer__links {
  margin-bottom: 3rem;
}

.img-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 10px;
}

.img-wrapper > div {
  border: 1px solid rgb(230, 230, 230);
  max-width: 90%;
  display: inherit;
  flex-direction: column;
  align-items: center;
  border-radius: 3px;
  background: rgb(245, 245, 245);
}

.img-wrapper > div > img {
  width: 100%;

  object-fit: contain;
}

.img-wrapper > div > header {
  width: 100%;
  padding: 5px 10px;
}

.img-wrapper > div > header > div {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
  background: #333;
  border-radius: 100%;
  margin-right: 5px;
}

.img-wrapper > div > header > div:nth-child(1) {
  background: rgb(242, 95, 88);
}
.img-wrapper > div > header > div:nth-child(2) {
  background: rgb(251, 190, 60);
}
.img-wrapper > div > header > div:nth-child(3) {
  background: rgb(88, 203, 66);
}

.badge-wrapper {
  display: flex;
  width: 100%;
}
.badge-wrapper + p {
  margin-top: 10px;
}

header + .markdown > .badge-wrapper:first-child {
  margin-top: -10px !important;
}

.badge {
  display: inline-block;
  color: #fff;
  background: #000;
  padding: 10px 20px;
  border-radius: 100px;
  top: -10px;
  position: relative;
  border: none;
  margin-bottom: 10px;
}
html[data-theme='dark'] .badge-type {
  background: #fff;
  color: #000;
}
.badge.badge-title {
  top: -20px;
}
.badge.badge-no-margin {
  top: 0;
}
.badge.badge-component {
  background: #304dda;
}
.badge.badge-hook {
  background: #4e31c5;
}
.badge.badge-hoc {
  background: #9284ca;
}
.badge.badge-function {
  background: #8870a7;
}

a.navbar__brand.active {
  font-size: 20px;
  font-weight: 200;
  color: #fff;
}

a.navbar__brand.active > strong {
  font-weight: 500;
}

a.big-btn {
  float: left;
  width: 100%;
  padding: 30px 60px;
  background: #000;
  color: #fff;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}
a.big-btn .bg {
  width: 0%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

a.big-btn .content {
  float: left;
  width: 100%;
  position: relative;
  z-index: 2;
}

a.big-btn i {
  font-size: 94px;
  position: absolute;
  right: -19px;
  top: 15px;
  opacity: 0.2;
  z-index: 2;
  transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateY(0%);
}

a.big-btn:hover {
  color: #000;
}
a.big-btn:hover .bg {
  width: 100%;
}
a.big-btn:hover i {
  color: #000;
  font-size: 54px;
  right: 40px;
  top: 50%;
  opacity: 1;
  transform: translateY(-50%);
}

a.btn {
  background: var(--ifm-color-secondary-lighter);
  border-radius: 100px;
  font-size: 13px;
  padding: 7px 24px;
  font-weight: 500;
  line-height: 3px;
  box-shadow: 0px 8px 27px -3px rgb(0 0 0 / 25%);
  color: #fff;
  margin-right: 10px;
}

a.btn.btn-text {
  background: transparent;
  color: var(--ifm-color-secondary-lighter);
  box-shadow: none;
}

html[data-theme='dark'] .api-type {
  color: #86f3d5;
}

html[data-theme='dark'] .api-description {
  color: #ffffffba;
}

.navbar__inner .react-toggle-track,
.navbar-sidebar .react-toggle-track {
  background: rgba(0, 0, 0, 0.2);
}

.navbar__inner .react-toggle-thumb,
.navbar-sidebar .react-toggle-thumb {
  left: 0;
  border: none;
  width: 23px;
  height: 23px;
  outline: none;
}

.footer .footer__links {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ifm-contents-border-color);
}

.footer .footer__end {
  color: var(--ifm-footer-madewith-color);
  font-size: 13px;
}

.footer .footer__madewith img {
  width: 20px;
  vertical-align: middle;
  margin-top: -4px;
}

.menu.menu--responsive .menu__button {
  box-shadow: 0px 3px 50px 0px rgba(0, 0, 0, 0.33);
  background: #fff;
  color: rgba(0, 0, 0, 0.5490196078431373);
  border: none;
}

.navbar__toggle > svg > path {
  stroke: #fff;
}

.navbar .navbar-sidebar {
  background: var(--ifm-sidebar-background-color);
  color: var(--ifm-sidebar-color);
}

.navbar .navbar-sidebar a.navbar__brand.active {
  color: var(--ifm-sidebar-color);
}

.navbar .navbar-sidebar a.navbar__brand .navbar__title {
  color: var(--ifm-sidebar-color);
}

.navbar .navbar-sidebar .navbar-sidebar__items .navbar__link--active {
  color: var(--ifm-color-primary);
}

.version-header-label {
  color: #fff !important;
  margin-left: 10px;
  position: relative;
  text-decoration: none !important;
  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.version-header-label:after {
  content: ' ';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
}

.version-header-label:hover:after {
  bottom: -2px;
}

.docSidebarContainer_node_modules-\@docusaurus-theme-classic-src-theme-DocPage- {
  width: 250px !important;
}

.navbar__title.hideLogoText_src-theme-Navbar- {
  display: block !important;
}

@media (min-width: 996px) {
  .main-wrapper {
    display: flex;
  }
}

.main-wrapper > div {
  width: 100%;
}

@media (max-width: 996px) {
  .navbar .navbar__inner > .navbar__items:first-child {
    min-width: 215px;
  }
}

.logo-container {
  display: flex;
  align-items: center;
}

.table-of-contents {
  font-size: 0.9rem;
}

.landing-page-contents {
  background: #dedede;
}

.navbar {
  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 99;
}

.app {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.app.waitingForLandingMessage .navbar {
  position: relative;
  top: -60px;
  margin-top: -60px;
}

.app.waitingForLandingMessage.loaded .navbar {
  top: 0;
  margin-top: 0;
}
